import React, { Component } from 'react';
import { Tooltip, Table } from 'antd';
import Mpagination from '../../../../SystemManage/components/Mpagination';

export default class Remind extends Component {
  state = {
    columns: [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        width: 30,
        align: 'center',
      },
      {
        title: '项目分期',
        dataIndex: 'projectStages',
        key: 'projectStages',
        width: 120,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '事件',
        dataIndex: 'event',
        key: 'event',
        width: 70,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '业务类型',
        dataIndex: 'moduleTypeName',
        key: 'moduleTypeName',
        width: 70,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '版本名称',
        dataIndex: 'versionName',
        key: 'versionName',
        width: 120,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: (
          <>
            <div>操作前</div>
            <div>版本状态</div>
          </>
        ),
        dataIndex: 'beforeState',
        key: 'beforeState',
        width: 70,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: (
          <>
            <div>操作后</div>
            <div>版本状态</div>
          </>
        ),
        dataIndex: 'afterStateValue',
        key: 'afterStateValue',
        align: 'center',
        width: 70,
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '操作人',
        dataIndex: 'usercn',
        key: 'usercn',
        width: 70,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: 100,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
    ],
  };

  handlePaginationChange = (current, pageSize) => {
    const { dispatch, match, dynamicParams } = this.props;
    const params = {
      ...dynamicParams,
      current,
      pageSize,
    };
    dispatch({
      type: 'Workbench/requestDynamicData',
      payload: {
        params,
      },
    });
  };

  render() {
    const { dynamicItems, formState, dynamicLoading } = this.props;
    const tableHeight = formState ? 325 : 272;
    return (
      <div className="crar-content1">
        <Table
          columns={this.state.columns}
          bordered
          rowKey="index"
          size="middle"
          dataSource={dynamicItems.list}
          loading={dynamicLoading}
          pagination={false}
          scroll={{ y: document.body.clientHeight - tableHeight }}
        />
        <Mpagination
          total={dynamicItems.total || 0}
          pageSize={dynamicItems.pageSize || 20}
          current={dynamicItems.current || 1}
          pages={dynamicItems.pages || 0}
          onShowSizeChange={(c, p) => this.handlePaginationChange(c, p)}
          handlePaginationChange={this.handlePaginationChange}
        />
      </div>
    );
  }
}
